<template>
  <div class="tabel">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" v-bind="childrenProps">
      <el-table-column v-if="showSelectCloum" type="selection" align="center" width="60"></el-table-column>
      <el-table-column v-if="showIndexCloum" type="index" label="序号" align="center" width="100"></el-table-column>
      <template v-for="propItem in propsList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">{{scope.row[propItem.prop]}}</slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    tableData: {
      type: Array,
      require: true
    },
    propsList: {
      type: Array,
      require: true
    },
    showIndexCloum: {
      type: Boolean,
      default: false
    },
    showSelectCloum: {
      type: Boolean,
      default: false
    },
    childrenProps: {
      type: Object,
      default: () => { return {} }
    }
  },
  emits: ['changeSelect'],
  setup(props, { emit }) {
    const handleSelectionChange = (value) => {
      emit('changeSelect', value)
    }
    return {
      handleSelectionChange
    }
  }
})
</script>

<style lang="less" scoped>
.header {
  margin-bottom: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
